<script lang="ts">
    import type { ModalConfig } from "./Modal";
    import Modal from "./Modal.svelte";
    import Icon from "../Common/Icons/Icon.svelte";
    import { createUniqueId } from "../utils/createUniqueId";
    import { useClassList } from "../utils/useClassList";
    import { _ } from "svelte-i18n";

    const store = $state<ModalConfig[]>([]);
    const modalMap = $state<any>({});
    const visibleMap = $state<Record<string, boolean>>({});

    const icons: any = {
        info: "info",
        success: "checkCircle",
        warning: "warning",
        error: "xCircle",
        confirm: "help",
    };

    export const open = (config: ModalConfig) => {
        if (!config.key) {
            config.key = createUniqueId();
        }
        if (config.type !== "confirm") {
            config.hideCancle = true;
        }
        config.maskClosable = config.maskClosable ?? false;
        config.okText = (config.okText ?? config.type !== "confirm") ? $_("Modal.okText") : $_("Modal.confirmText");
        visibleMap[config.key!] = true;
        store.push(config);
    };

    export const info = (config: ModalConfig) => {
        config.type = "info";
        open(config);
    };

    export const success = (config: ModalConfig) => {
        config.type = "success";
        open(config);
    };

    export const warning = (config: ModalConfig) => {
        config.type = "warning";
        open(config);
    };

    export const error = (config: ModalConfig) => {
        config.type = "error";
        open(config);
    };

    export const confirm = (config: ModalConfig) => {
        config.type = "confirm";
        open(config);
    };
</script>

{#each store as item}
    {@const { title, content, ...data } = item}
    {@const clazz = useClassList(data, "cm-modal-instance")}
    {@const style = "min-width: 300px;" + (data.style || "")}
    <Modal {...data} class={clazz} {style} defaultPosition={data.defaultPosition || { top: "20%" }} bind:this={modalMap[data.key!]} bind:visible={visibleMap[data.key!]}>
        {#if data.icon || icons[data.type as any]}
            <div class="cm-modal-left">
                <div class="cm-modal-icon">
                    {#if data.icon}
                        {@render data.icon()}
                    {:else}
                        <Icon icon={icons[data.type as any]} class={`cm-modal-icon-${data.type}`} />
                    {/if}
                </div>
            </div>
        {/if}
        <div class="cm-modal-right">
            <div class="cm-modal-confirm-title">
                {#if typeof title === "function"}
                    {@render title()}
                {:else}
                    {title}
                {/if}
            </div>
            <div class="cm-modal-confirm-content">
                {#if typeof content === "function"}
                    {@render content()}
                {:else}
                    {content}
                {/if}
            </div>
        </div>
    </Modal>
{/each}
